var HEADOM = `
<div class='hea-com-wrap'>

    <!-- 充值 -->
    <div id='mask-hea' v-if='heaMask'></div>
    <transition enter-active-class='animated bounceIn'>
        <div id='mask-1-hea' v-if='heaMask'>
            <div class='mask-con-hea'>
                <div class='dis-spa edit-tit-hea'>
                    <span style="opacity:0;">1</span>
                    <span v-text='tit'>充值</span>
                    <img class='hover' @click='heaMask=false;' src="./img/close.svg" style="width:22px;height:22px;">
                </div>
                <div class='mask-con-wrap-hea'>
                    <div class='dis-cen'>
                        <div class='dis-cen change-type'>
                            <span :class="{'hover':true,'pay-type-active':conType=='zhifubao'}" @click="conType='zhifubao'">支付宝</span>
                            <span :class="{'hover':true,'pay-type-active':conType=='yinhang'}" @click="conType='yinhang'">银行卡</span>
                        </div>
                    </div>
                    
                   <div v-if="conCen=='rechZhi'" class='dis-spa rech-zhi'>
                        <img src='./img/qr.jpg' style='width:150px;height:150px'/>
                        <p>打开支付宝扫描此二维码</p>
                   </div>

                   <div v-if="conCen=='rechYin'">
                        <div class='rech-back'>
                            <p class='hover' @click="conCen='rechMon'">
                                <span>银行卡1</span>
                                <span>231352*********12155</span>
                                <span>(中国工商银行)</span>
                            </p>
                            <p class='hover'>
                                <span>银行卡1</span>
                                <span>231352*********12155</span>
                                <span>(中国工商银行)</span>
                            </p>
                            <p class='hover'>
                                <span>银行卡1</span>
                                <span>231352*********12155</span>
                                <span>(中国工商银行)</span>
                            </p>
                            <p class='hover'>
                                <span>银行卡1</span>
                                <span>231352*********12155</span>
                                <span>(中国工商银行)</span>
                            </p>
                        </div>
                   </div>

                   <div v-if='conCen=="rechMon"' class='rech-money'>
                        <h2>12454241*****41534153412112</h2>
                        <p>（中国工商银行）</p>
                        <input  type='text' placeholder='充值金额（元）'/>
                        <div class='dis-spa'>
                            <button @click="conCen='rechYin'">返回选卡</button>
                            <button @click="conCen='rechSure'">下一步</button>
                        </div>
                   </div>

                   <div v-if='conCen=="rechSure"' class='rech-money'>
                        <h2>12454241*****41534153412112</h2>
                        <p>（中国工商银行）</p>
                        <h5>充值<span>1200.00</span>元</h5>
                        <input  type='text' placeholder='请输入交易密码'/>
                        <div class='dis-spa'>
                            <button @click="conCen='rechMon'">上一步</button>
                            <button>确认充值</button>
                        </div>
                    </div>

                   <div v-if="conCen=='nobind'" class='dis-spa no-bind'>
                        <h2>暂无绑定</h2>
                        <button class='hover' @click='bind'>立即绑定</button>
                    </div>
                </div>
            </div>
        </div>
    </transition>
    <!-- 充值 -->

    <div class='margin-center hea-content'>
        <div class='hover hea-left' @click='window.location.href="./index.html"'>
            <img src="./img/logo-font.png" style="height:25px;width:110px;">
        </div>
        <div class='hea-right'>
            <ul class='dis-spa'>
                <li @click='goMy' class='hover dis-cen'><img :src="ava" style="height:20px;width:20px;padding-bottom: 2px;"></li>
                <li class='hover' @click='goMy'>
                    <span v-text='mobile'>1887****2014</span>
                </li>
                <li><span>￥</span><span v-text="parseFloat(user_balance).toFixed(2)">8104.00</span></li>
                <li class='hover' @click='rech("充值")'>充值</li>
                <li class='hover' @click='rech("提现")'>提现</li>
                <li class='hover' @click="kill"><img src="./img/back.svg" style="height:16px;width:16px;"></li>
            </ul>
        </div>
    </div>
</div>
`;
Vue.component('hea-component', {
    template: HEADOM,
    //用户信息  用户余额
    props: ['user_info', 'user_balance'],
    data: function() {
        return ({
            //弹窗控制
            heaMask: false,
            //充值/提现（tit）
            tit: '充值',
            //支付宝或者银行卡选择  zhifubao:支付宝  yinhang:银行卡
            conType: 'zhifubao',
            //弹窗内容控制 nobind:没绑定支付宝或银行卡  rechZhi:充值支付宝  rechYin:充值银行卡(选择)  rechMon:充值银行卡(输入金额)  rechSure:充值银行卡（输入交易密码）
            conCen: 'nobind'
        });
    },
    computed: {
        //处理手机号显示
        mobile: function() {
            // if ($.cookie('token')) {
            if (_getItem('token')) {
                if (this.user_info && this.user_info.Mobile) {
                    return this.user_info.Mobile.slice(0, 4) + '****' + this.user_info.Mobile.slice(7, 11);
                } else if (this.user_info && this.user_info.NickName) {
                    return this.user_info.NickName;
                } else {
                    return '';
                }
            } else {
                return '未登录';
            }
        },
        //处理头像显示
        ava: function() {
            if (this.user_info && this.user_info.HeadImage) {
                return this.user_info.HeadImage;
            } else {
                return './img/my-ava.svg';
            }
        }
    },
    methods: {
        //调充值
        rech: function(tit) {
            this.heaMask = true;
            this.tit = tit;
            if (tit == '充值') {
                this.conCen = 'nobind';
                // this.conCen = 'rechZhi';
                // this.conCen = 'rechYin';
                // this.conCen = 'rechMon';
                // this.conCen = 'rechSure';
            } else {
                //提现
                // this.conCen=
            }
        },
        //绑定支付宝/银行卡
        bind: function() {
            this.heaMask = false;
            if (this.conType == 'yinhang') {
                //绑定银行卡
                this.$emit('bind_bank');
            } else {
                //绑定支付宝
                this.$emit('bind_alipy');
            }
        },
        //去我的页面
        goMy: function() {
            // $.cookie('token')
            if (!_getItem('token')) {
                app.$message.error('请前往登录！');
                setTimeout(function() {
                    _openHref({
                        url: './login.html'
                    });
                }, 1500);
            } else {
                _openHref({
                    url: './my.html'
                });
            }
        },
        //退出登录
        kill:function(){
            if(!_getItem('token')){
                return;
            }
            this.$confirm('此操将退出, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
              }).then(() => {
                   localStorage.setItem('token','');
                    setTimeout(function(){
                        _openHref({
                            url:'./login.html'
                        });
                    },1200);
              }).catch(() => {
                       
              });
              this.$nextTick(function(){
                  $('.el-message-box__headerbtn .el-message-box__close').remove();
                  $('.el-message-box__status').remove();
                  $('.el-message-box__headerbtn').append('<img src="./img/close-a.svg" style="opacity:.5; width:20px; height:20px">');
              });
        }
    },
});
// Vue.component('hea-component', heaComponent);